<template>
  <div class="page-details">
    <div class="page-details-wrap">
      <div class="details-img">
        <span>头像：</span>
        <img :src="details.img" />
      </div>
      <div class="details-name"><span>姓名</span>{{ details.name }}</div>
      <div class="details-position">
        <span>职位</span>{{ details.position }}
      </div>
      <div class="details-department">
        <span>部门</span>{{ details.department }}
      </div>
      <div class="details-email"><span>邮箱</span>{{ details.email }}</div>
      <div class="details-tel"><span>电话</span>{{ details.tel }}</div>
      <div class="details-address">
        <span>地址</span>{{ details.address }}
      </div>
      <div class="details-createtime">
        <span>创建时间</span>{{ details.createTime }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { useMenuHeaderStore } from "../../stores/menu-header";
import { onMounted, ref } from "vue";
import { useManegerStore } from "../../stores/maneger";
export default {
  name: "maneger/details",
  data() {
    return {
      details: [],
      //getManegerDetails: this.getManegerData,
      menuheaderStore: this.menuHeaderStore,
      manegerstore:this.manegerStore
    };
  },
  methods: {
    getManegerDetails(name){
        axios
        .get("http://localhost:3000/item", {
          params: {
            name: name,
          },
        })
        .then((res) => {
          console.log("得到登录用户的信息",res.data);
          this.details=res.data[0]
          //console.log(this.details);
        });
    }
  },
  mounted() {
    /* console.log("details===", this.details);
    console.log("getManegerDetails===", this.getManegerDetails);
    console.log("menuheaderStore===", this.menuheaderStore.username);
    console.log("manegerstore===", this.manegerstore.detailsData[0]); */
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
        console.log("from=======",from);
      if (from.path == "/maneger/list"||from.path =="/") {
        let diapalyDetailsData = vm.manegerstore.detailsData;
        diapalyDetailsData = diapalyDetailsData[0];
        console.log("diapalyDetailsData====", diapalyDetailsData);
        vm.details = diapalyDetailsData;
      } else {
         vm.getManegerDetails(vm.menuheaderStore.username)
      }
    });
  },
  setup() {
    const menuHeaderStore = useMenuHeaderStore();
    const manegerStore = useManegerStore();
    return {
      menuHeaderStore,
      manegerStore
    };
  },
};
</script>
<style lang="scss">
.page-details {
  /* width: 100%;*/
  height: 80%;
  background: #ccc;
  border-radius: 20px;
}

.page-details-wrap div {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-left: 120px;
  & span {
    display: inline-block;
    width: 80px;
  }
}
.page-details-wrap {
  overflow: hidden;
  & :nth-child(1) {
    margin-top: 50px;
  }
}
.details-img {
  display: flex;
  align-items: center;
  & span {
  }
  & img {
    width: 100px;
    border-radius: 50%;
  }
}
</style>
